<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>在线客服</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/H5/css/sm.min.css">
    <link rel="stylesheet" href="/H5/css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/withdraw_money.css?v=6" />
</head>

<body>
    <div class="page-group ms-controller" :controller="custom">
        <div class="page page-current">
            <header class="bar bar-nav">
                <a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
                <a class="icon icon-home pull-right" href="/H5"></a>
                <h1 class="title">在线客服</h1>
            </header>
            <div style="margin-bottom: 0;top: 2.5rem; position: absolute; width: 100%; z-index: 999999">
                <div class="buttons-tab">
                    <a :on-click="@typeChoose(1)" :class="@type==1?'tab-link active button':'tab-link button'">在线提问</a>
                    <a :on-click="@typeChoose(2)" :class="@type==2?'tab-link active button':'tab-link button'">问答记录</a>
                </div>
            </div>
            <div class="content visibility infinite-scroll infinite-scroll-bottom" data-distance="100" style="top: 5rem">
                <div class="tabs">
                    <div :visible="@type==1" class="tab active">
                        <div class="list-block" style="margin:0; padding:0;">
                            <ul class="balance">
                                <li>
                                    <div class="item-inner">
                                    <div class="item-title label">问题类型</div>
                                        <div class="item-input">
                                            <div class="item-input">
                                                <select style="font-size:14px;" :duplex="@typeId">
                                                    <option>请选择问题类型</option>
                                                    <option :for="el in @data.customer_service.type_list" :attr="{'value': el.id}">{{el.title}}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-inner" style="padding-right:0;">
                                        <div class="item-input">
                                            <div class="item-title label">问题内容</div>
                                            <textarea placeholder="请在此描述您的具体问题" :duplex="@wenti" class="textarea"></textarea>
                                        </div>
                                    </div>
                                </li>
                            </ul> 
                            <button :on-click="@ask" class="balance_btn">提 交</button> 
                        </div>              
                    </div>
                    <div :visible="@type==2" class="tab active">
                        <div class="linewhat" :for="el in @list" :on-click="@jump('/H5/customdetail?id='+el.id)">
                            <a href="javascript:;" style="color:black;">
                                <span class="linewhat_p_span" :css="{'background-color': el.status==0?'#0c0':el.status==1?'#999':'#f00'}">{{el.status_label}}</span>
                                <div class="linewhat_p_div">{{el.title||""}}</div>
                                <span :visible="el.is_read==0" style="float: right; width: .5rem; height: .5rem; border-radius: .5rem;background-color: #f00"></span>
                            </a>
                            <div class="linewhat_div">
                                <div class="linewhat_div_first">问题类型：{{el.type_label||""}}</div>
                                <time class="time">{{el.create_time||""}}</time>
                            </div>
                        </div>                      
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
    <script>
        var custom = avalon.define({
            $id: "custom",
            type: Mall.parseUrl( window.location.href ).type,
            wenti: "",
            typeId: "",
            list: [],
            loading: false,
            more: false,
            page_num: 1,
            page_size: 10,
            data: {customer_service:{type_list:[]}},
            typeChoose: function( t ){
                $( ".content" ).addClass( "visibility" );
                var url = window.location.href.split( "?type=" )[0]+"?type="+t;
                custom.type = t;
                custom.page_num = 1;
                custom.status = 0;
                window.history.replaceState(null, null, url);
                if( t == 2 ){
                    custom.getList();
                }
                else{
                    custom.more = false;
                    $( ".content" ).removeClass( "visibility" );
                    if( $( ".empty" ).length ){
                        $( ".empty" ).remove();
                    }
                }
            },
            getList: function( t ){
                if( custom.loading ){
                    return
                }
                custom.loading = true;
                Mall.request( "/api/QuestionList", { page_num: custom.page_num, page_size: custom.page_size} )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            if( t ){
                                custom.list = custom.list.concat( data.data.list );
                            }
                            else{
                                custom.list = data.data.list;
                                $( ".content" ).removeClass( "visibility" );
                            }
                            if( custom.page_num == data.data.page_total ){
                                custom.more = false;
                            }
                            else{
                                if( data.data.list.length == 0 ){
                                    custom.more = false;
                                }
                                else{
                                    custom.more = true;
                                }
                            }
                            custom.page_num ++;
                        }
                        custom.loading = false;
                    } )
            },
            ask: function(){
                if( Mall.LOCK ){
                    return
                }
                if( !custom.typeId ){
                    $.toast( "请选择问题类型", 2000, "warning" )
                    return
                }
                if( !custom.wenti ){
                    $.toast( "请添加问题描述", 2000, "warning" )
                    return
                }
                Mall.LOCK = true;
                Mall.request( "/api/QuestionSubmit", { type: custom.typeId, title: custom.wenti } )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            $.toast( "提交成功", 1000, "success", function(){
                                window.location.href = "/H5/custom?type=2";
                            } )
                        }
                        Mall.LOCK = false;
                    } )
            },
            jump: function( url ){
                window.location.href = url;
            }
        })
        custom.type==2 && custom.getList();
        $( ".content" ).removeClass( "visibility" );
        avalon.scan( document.body )
    </script> 
</body>
</html>
